<template>
  <div>
    <img alt="Vue Logo" src="./assets/logo.png" />
    <HelloWorld :age="12" />
    {{ nameRef }}
    {{ name2 }}
    {{ ref2 }}
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref, watchEffect } from 'vue'
import HelloWorld from './components/HelloWorld_.vue'

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld,
  },
  mounted() {
    console.log('mounted')
  },
  setup(props, { slots, attrs, emit }) {
    const nameRef = ref('shelley3') // { value: xxx}
    const state = reactive({
      // 变量的定义要是reactive，才会根据定时器变化
      name: 'shelley',
    })
    const ref2 = ref(123)
    // reactive
    // setInterval(() => {
    //   state.name += '1'
    // }, 1000)

    // ref
    // setInterval(() => {
    //   nameRef.value += '2'
    // }, 1000)
    // setInterval(() => {
    //   ref2.value += 2
    // }, 1000)
    // nameRef 重新赋值，此函数重新运行，变量是否是 immediate，deep
    const computedNameRef = computed(() => {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      return nameRef.value + '3'
    })
    // 每次 nameRef 重新赋值时，引起这个操作，副作用，只依赖函数内的变量，如果变量变化，则运行，watchEffect不需要考虑 immediate，deep
    watchEffect(() => {
      console.log(ref2.value)
    })

    return {
      // state,
      //...state 错误，取对象，不是响应式了
      nameRef,
      name2: computedNameRef,
      ref2,
    }
  },
})
</script>

<style></style>
